<!--
 * @Description: 
 * @Autor: wangwangwang
 * @Date: 2021-03-05 16:30:56
 * @LastEditors: wangwangwang
 * @LastEditTime: 2021-03-08 13:59:26
-->
<template>
  <div class="pages_content table">
    <el-container>
      <el-header>
        <breaDcrumb />
      </el-header>
      <el-main style="display: flex;flex-direction:column">
        <div class="header_right">
          <div>
            <el-button size="small" class="bottom_all" style="margin-left: 0;">
              <span>环境监测规则</span>
              <div class="question">?</div>
            </el-button>
            <span style="display: inline-block;margin-bottom: 10px;margin-left: 80px;">
              <span style="margin-right: 12px">站点：</span>
              <el-select placeholder="请选择" style="width:120px">
                <el-option v-for="(item, index) in siteList" :key="index" :label="item.itemName" :value="item.id"></el-option>
              </el-select>
            </span>
            <span style="margin-left: 80px;">负责人：</span>
            <span style="margin-left: 80px;">站点地址：</span>
          </div>
          <el-button size="small" class="bottom_all_two" style="margin-left: 12px" @click="styleStatus=!styleStatus">切换样式</el-button>
        </div>
        <div class="hr"></div>
        <div v-show="styleStatus" class="monitoring scroll">
          <template v-for="(item,index) in monitoringList">
            <div :key="index" class="monitoring-style">
              <div class="monitoring-title">
                <span style="font-size:14px;">设备号：HJ2443</span>
                <span class="monitoring-title-title">粉尘监控</span>
                <div>
                  <span class="monitoring-title-status1">正常运行</span>
                  <span class="monitoring-title-status2">设备未连接</span>
                  <span class="monitoring-title-status3">设备故障</span>
                </div>
              </div>
              <div class="monitoring-table srcoll">
                <table>
                  <tr>
                    <th colspan="2">
                      <div></div>当前数值
                    </th>
                    <th>
                      <div></div>监测预警
                    </th>
                  </tr>
                  <tr>
                    <td>
                      ☆喷雾压力：10～12Mpa
                    </td>
                    <td class="width:40px">
                      <el-tag type="success">正常</el-tag>
                    </td>
                    <td>降灰效率XXX大于XXX，2020-09-03 10:38:25</td>
                  </tr>
                  <tr>
                    <td>
                      ☆雾化粒径：≤100um
                    </td>
                    <td class="width:40px">
                      <el-tag type="success">正常</el-tag>
                    </td>
                    <td>降灰效率XXX大于XXX，2020-09-03 10:38:25</td>
                  </tr>
                  <tr>
                    <td>
                      ☆喷雾流量：20～40L/mi
                    </td>
                    <td class="width:40px">
                      <el-tag type="success">正常</el-tag>
                    </td>
                    <td>降灰效率XXX大于XXX，2020-09-03 10:38:25</td>
                  </tr>
                  <tr>
                    <td>
                      ☆降尘效率：≥85%
                    </td>
                    <td class="width:40px">
                      <el-tag type="success">正常</el-tag>
                    </td>
                    <td>降灰效率XXX大于XXX，2020-09-03 10:38:25</td>
                  </tr>
                </table>
              </div>
              <div class="monitoring-log">
                <el-button size="mini" class="bottom_all">
                  <span>日志</span>
                </el-button>
              </div>
            </div>
          </template>
        </div>
        <div v-show="!styleStatus" class="monitoring scroll">
          <template v-for="(item,index) in monitoringList">
            <div :key="index" class="monitoring-style">
              <div class="monitoring-title">
                <span style="font-size:14px;">设备号：HJ2443</span>
                <span class="monitoring-title-title">粉尘监控</span>
                <div>
                  <span class="monitoring-title-status1">正常运行</span>
                  <span class="monitoring-title-status2">设备未连接</span>
                  <span class="monitoring-title-status3">设备故障</span>
                </div>
              </div>
              <div class="monitoring-empty">
                <span class="monitoring-empty-status2">设备未连接</span>
                <span class="monitoring-empty-status3">设备故障</span>
              </div>
            </div>
          </template>

        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import mixin from "@/mixins/ICPSmixin.js";
export default {
  mixins: [mixin],
  data() {
    return {
      siteList: [],
      monitoringList: [1, 5, 4, 5],
      styleStatus: false
    };
  },
  created() {
  },
  methods: {

  },
};
</script>

<style lang="scss" scoped>
.el-input,
.el-select {
  width: 240px;
}
.question {
  border: 1px #ffffff solid;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 12px;
  line-height: 18px;
  display: inline-block;
  margin-left: 10px;
}
.monitoring {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  padding: 0 2% 1% 2%;
  justify-content: space-between;

  &-style {
    margin-top: 1%;
    min-height: 310px;
    width: 49%;
    height: 48%;
    border: 1px #e1e5ed solid;
    position: relative;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
  }
  &-empty {
    flex: 1;
    padding: 10px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    &-status2 {
      font-size: 40px;
      font-weight: bold;
      color: #909399;
    }
    &-status3 {
      font-size: 40px;
      font-weight: bold;
      color: #f56c6c;
    }
  }
  &-title {
    font-size: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    &-title {
      font-weight: bold;
    }
    &-status1 {
      font-weight: bold;
      color: #67c23a;
    }
    &-status2 {
      font-weight: bold;
      color: #909399;
    }
    &-status3 {
      font-weight: bold;
      color: #f56c6c;
    }
  }
  &-table {
    padding: 10px 20px;
    table {
      width: 100%;
    }
    th {
      text-align: left;
      padding: 10px 0;
      width: 50%;
      font-size: 16px;
      > div {
        margin-right: 5px;
        background: #000;
        width: 4px;
        height: 14px;
        display: inline-block;
      }
    }
    td {
      padding: 5px;
    }
  }
  &-log {
    position: absolute;
    right: 10px;
    bottom: 10px;
  }
}
</style>
